<!-- 系统Setup板块  -- 平台信息页面 -->
<template>
  <div class="total">
    <r-search
      ref="search"
      labelWidth="250px"
      labelPosition="right"
      :searchData="searchData"
      :searchForm="searchForm"
      :searchHandle="searchHandle"
      :inline="false"
      :searchRules="searchRules"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchData: {
        title: "",
        content: "",
        timer: 15
      },
      searchForm: [
        {
          type: "input",
          label: "Announcement Topic",
          placeholder: "Announcement Topic",
          prop: "title",
          width: 300
        },
        {
          type: "input",
          types: "number",
          label: "Notice display time (seconds)",
          placeholder: "Notice display time (seconds)",
          prop: "timer",
          width: 300
        },
        {
          type: "switch",
          label: "Enable/Forbidden",
          width: 350,
          prop: "status",
          values: [1, 2]
        },
        {
          type: "textarea",
          label: "Announcement Content",
          placeholder: "Announcement Content",
          prop: "content",
          width: 400
        }
      ],
      searchHandle: [
        { type: "primary", label: "Save", handle: e => this.elFormSubmit() }
      ],
      searchRules: {}
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    // 获取
    async getData() {
      const res = await this.apis.protocolGuide_getInfo({
        type: 8
      });
      if (res.data) {
        this.searchData.content = res.data.content;
        this.searchData.status = res.data.status;
        this.searchData.timer = res.data.timer;
        this.searchData.title = res.data.title;
      }
    },

    // Save
    elFormSubmit() {
      this.$refs.search.$refs.ruleForm.validate(async valid => {
        console.log(333, this.searchData);

        const res = await this.apis.protocolGuide_saveOrUpdate({
          type: 8,
          content: this.searchData.content,
          status: this.searchData.status,
          timer: this.searchData.timer ? Number(this.searchData.timer) : 0,
          title: this.searchData.title
        });
        this.$message({
          type: res.code == 200 ? "success" : "error",
          message: res.msg
        });
      });
    }
  }
};
</script>

<style scoped lang="scss">
.total {
  border: 1px solid #ddd;
  padding: 20px;
  box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.4);
  height: 82vh;
}

/deep/ .el-tabs__item:hover {
  color: #6bdb85 !important;
  cursor: pointer;
  border: 1px solid #6bdb85;
}

/deep/ .el-tabs__item.is-active {
  color: #6bdb85 !important;
}
</style>
